﻿@page "/chart/column-placement"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows four series of columns in which each column is rendered with a different width and placed behind the other column.</p>
</SampleDescription>
<ActionDescription>
    <p>
        In this example, you can see how to render and configure the column type chart. The column type chart is used to compare the frequency, count, total or average of data in different categories. The <code>EnableSideBySidePlacement</code> property is used to enable/disable side-by-side position. <code>DataLabel</code> is used to represent individual data and its value.
    </p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Fruit Consumption" EnableSideBySidePlacement="false" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" ColumnWidth="0.5" XName="ConsumerName" YName="TotalCount" Name="Total" Type="ChartSeriesType.Column">
                <ChartMarker>
                    <ChartDataLabel Visible="true" Name="DataLabelMappingName" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" ColumnWidth="0.4" XName="ConsumerName" YName="AppleCount" Name="Apple" Type="ChartSeriesType.Column">
                <ChartMarker>
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" ColumnWidth="0.3" XName="ConsumerName" YName="OrangeCount" Name="Orange" Type="ChartSeriesType.Column">
                <ChartMarker>
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" ColumnWidth="0.2" XName="ConsumerName" YName="GrapesCount" Name="Grapes" Type="ChartSeriesType.Column">
                <ChartMarker>
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<ColumnPlacementChartData> ChartPoints { get; set; } = new List<ColumnPlacementChartData>
    {
      new ColumnPlacementChartData { ConsumerName = "Jamesh", TotalCount = 10, AppleCount = 5, OrangeCount = 4, GrapesCount = 1, DataLabelMappingName = "Total 10" },
      new ColumnPlacementChartData { ConsumerName = "Michael", TotalCount = 9, AppleCount = 4, OrangeCount = 3, GrapesCount = 2, DataLabelMappingName = "Total 9" },
      new ColumnPlacementChartData { ConsumerName = "John", TotalCount = 11, AppleCount = 5, OrangeCount = 4, GrapesCount = 2, DataLabelMappingName = "Total 11" }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class ColumnPlacementChartData
    {
        public string ConsumerName { get; set; }
        public double TotalCount { get; set; }
        public double AppleCount { get; set; }
        public double OrangeCount { get; set; }
        public double GrapesCount { get; set; }
        public string DataLabelMappingName { get; set; }
    }

}
